<template>
  <div class="sidebar">
    <ul class="nav-tool hp100">
      <li v-for="(item, index) in state.menuItems" :class="{active: item.active}" :key="item.path" @click="navigate(index)">
        <el-icon><component :is="item.icon"></component></el-icon>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import {reactive, ref} from "vue";

const router = useRouter();
// 示例：在组件创建时导航到默认路由

const state = reactive({
  menuItems: [
    { name: 'index', path: '/', icon: 'House', active: true},
    // { name: 'vpn', path: '/vpn', icon: 'Platform' , active: false},
    // { name: 'test', path: '/test', icon: 'Connection' , active: false},
    { name: 'setting', path: '/setting', icon: 'Setting' , active: false}
  ]
});

const navigate = (index) => {
  for (let i in state.menuItems){
    state.menuItems[i].active = false;
  }
  state.menuItems[index].active = true;
  router.push(state.menuItems[index].path);
}

</script>
<style scoped>
.nav-tool{
  text-align: center;
  flex: 0 0 70px; /* 固定宽度为 200px */
  overflow-y: auto;
  background:#F9F9F9;
  border-right:2px solid #ddd;
  li{
    display: block;
    width:70px;
    line-height:70px;
    text-decoration:none;
    color:#666;
    cursor:pointer;
    font-size:30px;
  }
  li.active{
    background:#EDEDED;
    color:#333;
  }
}

</style>